<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
            <div slot="title"  @click="$router.push({path: '/home/search', query: {type: 0}})">
                <div class="search">
                    <span>在这里输入您想查找的东西</span>
                    <i class="home_search_icon"></i>
                </div>
            </div>
        </v-header>
        <div class="main_allScroll">
            <div class="srot_left" ref="srot_left">
                <div class="srot_left_content" ref="srot_left_content">
                    <div  class="item" v-for="v in calssifyArr" :class="selectData.code == v.code ? 'active' : ''" @click="selectData = v">
                        <div>{{v.name}}</div>
                    </div>
                </div>
            </div>
            <div class="srot_right" ref="srot_right">
                <div class="srot_right_content" ref="srot_right_content" v-if="selectData.code != 'SJH_all'">
                    <div class="banner" v-if="sortBanner.arr && sortBanner.arr.length >= 1" v-on:click="bannerClick(sortBanner.arr[0])">
                        <img v-lazy="{src:sortBanner.arr[0].bannerImg,loading: bannerLoadImg, error: bannerLoadImg}" alt="">
                    </div>
                    <div v-show="selectData.code == 'SJH_all'" class="recommend"><i class="new_hot_icon" style="margin-right: .06rem;transform: translateY(1px)"></i>为您推荐</div>
                    <ul :class="selectData.code == 'SJH_all'?'active':''">
                        <li v-for="v in selectData.childProductCategoryInfos" @click="gotoPage(v)">
                            <img v-lazy="{src:v.img}" alt="">
                            <span>{{v.name}}</span>
                        </li>
                    </ul>
                </div>
                <v-scroll
                        ref="srotScroll"
                        :listenScroll="true"
                        :probeType="3"
                        :pullDownRefresh="pullDownRefreshObj"
                        :pullUpLoad="pullUpLoadObj"
                        :startY="parseInt(startY)"
                        :click="true"
                        @pullingDown="onPullingDown"
                        @pullingUp="onPullingUp"
                        @pageScrol="pageScrol"
                        v-else>
                    <div class="srot_right_content">
                        <div class="banner" v-if="sortBanner.arr && sortBanner.arr.length >= 1" v-on:click="bannerClick(sortBanner.arr[0])">
                            <img v-lazy="{src:sortBanner.arr[0].bannerImg,loading: bannerLoadImg, error: bannerLoadImg}" alt="">
                        </div>
                        <div v-show="selectData.code == 'SJH_all'" class="recommend"><i class="new_hot_icon" style="margin-right: .06rem;transform: translateY(1px)"></i>为您推荐</div>
                        <ul :class="selectData.code == 'SJH_all'?'active':''">
                            <li v-for="v in sortList" @click="gotoGoods(v)">
                                <img v-lazy="{src:v.activityImageUrl}" alt="">
                                <span>{{v.templateActivityDescribe}}</span>
                            </li>
                        </ul>
                    </div>
                </v-scroll>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapState,mapActions} from 'vuex'
    import {GET_CATEGORIES} from 'store/categories'
    import {GET_SORTLIST,PUSH_SORTLIST,GET_SORTBANNER} from 'store/home'
    export default {
      name:'homeSory',
      created(){
        this.selectData = {
          code:'SJH_all'
        }
        this.getGoodsType()
        this.creadInit()
      },
      mounted(){
        this.$nextTick(() => {
          this.InitTabScroll();
        })
      },
      activated(){
        this.init()
      },
      updated(){
        this.InitTabScroll();
      },
      data(){
        return({
          selectData:{
            code:'SJH_all'
          },
          scrollbar: false,
          scrollbarFade: false,
          pullDownRefresh: true,
          pullDownRefreshThreshold: 60,
          pullDownRefreshStop: 40,
          pullUpLoad: true,
          pullUpLoadThreshold: 0,
          pullUpLoadMoreTxt: 'scrollComponent.defaultLoadTxtMore',
          pullUpLoadNoMoreTxt: 'scrollComponent.defaultLoadTxtNoMore',
          startY: 0,
          pageNum: 1,
          pageSize: 15,
          scrollPos:0,
          bannerLoadImg: require('../../assets/img/banner_loadImg.png'),
        })
      },
      methods:{
        ...mapActions([GET_CATEGORIES,GET_SORTLIST,PUSH_SORTLIST,GET_SORTBANNER]),
        creadInit(){
          this.pageNum = 1
          this.GET_SORTLIST([])
          this.scrollPos = 0
        },
        init(){
          this.getBanner()
        },
        getBanner() {
          this.$ajax.getBanner({
            pageSize: 1,
            pageNum: 1,
            location: 22,
            queryType: 'App'
          })
            .then((res) => {
              this.GET_SORTBANNER(res.body.content.list)
            })
        },
        InitTabScroll(){
          this.scroll = new BScroll(this.$refs.srot_left, {
            click: true,
          })
          this.scrollTwo = new BScroll(this.$refs.srot_right, {
            click: true,
          })
        },
        bannerClick(obj){
          if(obj.type == 0){
            return
          }
          if(obj.type == 1){
            if(obj.businessType == "1" || obj.businessType == "3"){
              this.$router.push( "/home/product_details?type="+obj.businessType+"&templateId="+obj.businessId)
            }else if(obj.jumpUrl && obj.title) {
              let urlOley = obj.jumpUrl.trim()
              if(obj.jumpUrl.indexOf('?') >= 0 ){
                this.$router.push(urlOley.split('#')[1] + '&t=' + obj.title + '&bannerId=' + obj.bannerId)
              } else {
                this.$router.push(urlOley.split('#')[1] + '?t=' + obj.title + '&bannerId=' + obj.bannerId)
              }
            }
          }else if(obj.type == 2){
            if(obj.jumpUrl && obj.jumpUrl != null){
              let url = obj.jumpUrl.trim()
              if(url.indexOf('?') >= 0 ){
                url  = url  + '&bannerId=' + obj.bannerId
              } else {
                url = url + '?bannerId=' + obj.bannerId
              }
              this.Interactive.intoActivityWebView(obj.title,url)
            }
          }
        },
        //获取分类
        getGoodsType() {
          this.$ajax.displayGoodsType()
            .then((res) => {
              let arr = [];
              res.body.content.map((v, i) => {
                if (v.parentCode == '0') {
                  v.list = [];
                  if (i == 0) {
                    arr.push({
                      code: 'SJH_all',
                      createTime: "2018-05-10 11:01:14",
                      id: 1,
                      img: null,
                      logicDelete: 0,
                      name: "热门推荐",
                      pageNum: null,
                      pageSize: null,
                      parentCode: "0",
                    })
                  }
                  arr.push(v)
                }
              })
              this.GET_CATEGORIES(arr)
              this.getChildsByHome()
            })
        },
        getChildsByHome(){
          this.$ajax.activity.getTemplateActivityRelationListForUser({pageNum:this.pageNum,pageSize:this.pageSize,activityId:'473442807801970689'})
            .then((res)=>{
              this.$nextTick(()=>{
                this.$refs.srotScroll.forceUpdate()
              })
              if (res.body.content.list == null || res.body.content.list.length<= 0) {
                  this.loadMore = false
              } else {
                  this.loadMore = true
                this.pageNum++
              }
              if (this.sortList && this.sortList.hasOwnProperty('length') && this.sortList.length > 0 ) {
                this.PUSH_SORTLIST(res.body.content.list)
              } else {
                this.GET_SORTLIST(res.body.content.list)
              }


            })
            .catch(()=> {
              this.$nextTick(() => {
                this.$refs.srotScroll.forceUpdate()
              })
            })
        },
        gotoPage(dom){
          // this.Interactive.customStatistics({type: 1, eventID: 'sub_category',label: dom.name})
          this.$router.push({path: '/collage/classify', query: {code: dom.code,name: dom.name, type: '3,5'}})
        },
        refresh() {
          this.creadInit()
          global.myLoad = true
          this.getChildsByHome()
        },
        infinite() {
          global.myLoad = true
          this.loadMore = false
          this.getChildsByHome()
        },
        rebuildScroll() {
          Vue.nextTick(() => {
            this.$refs.srotScroll.destroy()
            this.$refs.srotScroll.initScroll()
          })
        },
        onPullingDown(){
          console.log('模拟更新数据')
          this.refresh()

        },
          onPullingUp() {
              // 更新数据
              console.log('更新数据')
              if(this.loadMore){
                  this.infinite()
              }else{
                  this.$nextTick(() => {
                      this.$refs.srotScroll.forceUpdate()
                  })
              }
          },
        pageScrol(data){
          this.scrollPos = -data.y
        },
        gotoGoods(data){
            this.$router.push("/home/product_details?type=3" + "&templateId=" + data.templateId)
        }
      },
      watch:{
        scrollbarObj: {
          handler() {
            this.rebuildScroll()
          },
          deep: true
        },
        pullDownRefreshObj: {
          handler(val) {
            const scroll = this.$refs.srotScroll.scroll
            if (val) {
              scroll.openPullDown()
            } else {
              scroll.closePullDown()
            }
          },
          deep: true
        },
        pullUpLoadObj: {
          handler(val) {
            const scroll = this.$refs.srotScroll.scroll
            if (val) {
              scroll.openPullUp()
            } else {
              scroll.closePullUp()
            }
          },
          deep: true
        },
        startY() {
          this.rebuildScroll()
        },
      },
      computed:{
        ...mapState({calssifyArr: state => state.categories.obj,sortList: state => state.homeList.sortList,sortBanner: state => state.homeList.sortBanner,}),
        scrollbarObj: function () {
          return this.scrollbar ? {fade: this.scrollbarFade} : false
        },
        pullDownRefreshObj: function () {
          return this.pullDownRefresh ? {
            threshold: parseInt(this.pullDownRefreshThreshold),
            stop: parseInt(this.pullDownRefreshStop)
          } : false
        },
        pullUpLoadObj: function () {
          return this.pullUpLoad ? {
            threshold: parseInt(this.pullUpLoadThreshold),
            txt: {more: this.pullUpLoadMoreTxt, noMore: this.pullUpLoadNoMoreTxt}
          } : false
        },
    }
    }
</script>
<style lang="less" scoped>
    @import "../../less/_variable";
    .main_allScroll{
        /*background-color: #fff;*/
    }
    .search{
        width: 5.58rem;
        height: .6rem;
        padding: 0 .34rem;
        background:rgba(238,238,238,1);
        border-radius: 1.2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: .24rem ;
        color: #BCBCBC;
    }
    .main_allScroll{
        display: flex;
        &>div{
            height: 100%;
            overflow: hidden;
        }
    }
    .srot_left{
        width: 1.7rem;
        background-color: #fff;
        .item{
            width: 100%;
            height: .96rem;
            background-color: transparent;
            margin-bottom: 2px;
            text-align: center;
            line-height: .96rem;
            position: relative;
            &.active{
                background-color: #F8F8F8;
                &:after{
                    content: '';
                    display: block;
                    width: .06rem;
                    height: 100%;
                    background-color: @c_lordColor;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
    }
    .srot_right{
        flex: 1;
        .banner{
            padding: 0 0.2rem;
            img{
                width: 100%;
            }
        }
        ul{
            width: 90%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: .44rem .2rem 0.54rem;
            background-color: #fff;
            border-radius: .12rem;
            margin-top: .2rem;
            li{
                width: 2.06rem;
                margin-bottom: .36rem;
                margin-right: .46rem;
                &:nth-child(2n){
                    margin-right: 0;
                }
                img{
                    width: 100%;
                }
                span{
                    width: 100%;
                    margin-top: .26rem;
                    font-size: .24rem;
                    color: #6a6a6a;
                    text-align: center;
                    display: -webkit-box;
                    /*! autoprefixer: off */
                    -webkit-box-orient: vertical;
                    /* autoprefixer: on */
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    line-height: 1.5;
                }

            }
            &.active{
                padding: .54rem .2rem;
                li{
                     width: 1.2rem;
                    margin-right: .56rem;
                    margin-bottom: .42rem;
                    &:nth-child(3n){
                        margin-right: 0;
                    }
                    span{
                        width: 100%;
                        margin-top: .2rem;
                        font-size: .24rem;
                        color: #6a6a6a;
                        text-align: center;
                    }
                }
            }
        }
    }
    .recommend{
        width: 100%;
        margin: .56rem auto 0;
        text-align: center;
        font-size: .24rem;
        color: #282828;
    }
</style>